package com.dji.compose_learning.ui.view

import androidx.compose.animation.core.animateOffsetAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun OffsetView() {
//    val offsetAnimate by animateIntOffsetAsState(targetValue = IntOffset(x = 100, 100),
//        animationSpec = tween(1300))
//    val x by animateDpAsState(targetValue = 100.dp, animationSpec = tween(1300))
//    Row {
//        Box(modifier = Modifier
//            .size(50.dp)
//            .offset(x = offsetAnimate.x.dp, y = offsetAnimate.y.dp)
//            .background(MaterialTheme.colorScheme.primary)) {
//        }
//        Box(modifier = Modifier
//            .size(50.dp)
//            .offset(x=x,y=x)
//            .background(Color.Cyan))
//    }


    var changeOffset by remember { mutableStateOf(false) }
    // 定义 offset 动画
    val offset by animateOffsetAsState(if (changeOffset) Offset(100f, 100f) else Offset(0f, 0f),
        animationSpec = tween(durationMillis = 300, delayMillis = 100))
    Row {
        //这里box直接放在surface中则设置的大小尺寸无效，长宽会覆盖surface所以需要row包裹
        Box(Modifier
            // 设置 offset 数值
            .offset(offset.x.dp, offset.y.dp)
            .padding(10.dp)
            .size(100.dp)
            .background(Color.Blue)
            .clickable {
                changeOffset = !changeOffset
            }
        )
    }
}